<template>
	<view class="productDetails" v-if="detailJson">
		<view class="topBack">
			<!-- autoplay -->
			<swiper class="swiperClass" :indicator-dots="play  && detailJson.images.length > 1 " circular
				interval="2000" :style="{height:swiperHeight}" indicator-active-color="#FAE24E"
				indicator-color="#FFF8DF" :autoplay="play" @change='changeImg'>
				<!-- 	:style="{height:swiperHeight}"  -->
				<!-- @play="BoFang()" @pause="ZanTing()" -->
				<!-- @timeupdate="handleTimeupdate" -->
				<!-- @fullscreenchange="handleFullscreenchange" -->
				<swiper-item v-for="(item,index) in detailJson.videos" :key="index" v-if="detailJson.videos.length">
					<video :show-fullscreen-btn="false" @play="play = false" id="myVideo" :src="item"
						@ended="play = true" controls v-if="!play" :autoplay="!play"></video>
					<view class="cover" v-else>
						<!--  :style="{height:coverHight}" -->
						<image class="swiperClass  imageClass" :style="{height:coverHight}" :src="detailJson.cover"
							@load="handleLoad" mode="aspectFit">
						</image>

						<u-icon class="icons" name="play-circle" color="#fff" size="120" @click="play = false"></u-icon>
					</view>
				</swiper-item>
				<swiper-item v-for="(item,index) in detailJson.images" :key="index">
					<!-- 	:style="{height:imgList[current]}"  -->
					<image class="swiperClass" :style="{height:imgList[current]}" :src="item" :data-index='index'
						@load='handleImg' lazy-load='true' mode="aspectFill" @click="handlePreviewImage(item, index)">
					</image>

				</swiper-item>

			</swiper>
			<view class="titleDiv">
				<text>{{detailJson.title}}</text>
			</view>
			<view v-html="detailJson.content" style="padding: 20upx;">

			</view>
			<view class="kongbai"></view>
		</view>
		<view :class="['bottomDiv', detailJson.type == 1 ? '' : 'bottomDiv_right']"
			:style="{justifyContent: (detailJson.type == 2 ? 'flex-end' : '')}">
			<template v-if="detailJson.type == 1">
				<text class="hjText">合计：</text>
				<text class="hjMone">￥{{detailJson.price}}</text>
			</template>
			<view class="collectDiv" @click="collect(detailJson.id)" v-if="detailJson.type == 1">
				<image :src="isCollect?yesurl:nourl" mode="widthFix" class="czImgClass"></image>
				<text class="collectDivBottom">收藏</text>
			</view>
			<button class="collectDiv shareButton" open-type="share">
				<image src="https://chongwu.aitaoba.net/storage/uploads/20231118/db40f6d11603dbca0cbd57dd0178c529.png"
					mode="widthFix" class="czImgClass buttonImg"></image>

				<text class="collectDivBottom buttonText">分享</text>
			</button>
			<template v-if="detailJson.type == 1">
				<view class="collectDiv marginLeft50" @tap="addToShoppingCart">
					<image
						src="https://chongwu.aitaoba.net/storage/uploads/20231118/e57bbb36ec7129aa09dbe435079a390a.png"
						mode="widthFix" class="czImgClass"></image>

					<text class="collectDivBottom minWidth80">购物车</text>
				</view>
				<button class="purchaseButton" @click="orderCreate">立即购买</button>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		goodsDetail,
		goodsCollect,
		addCart
	} from '@/api/shoppingMall.js';
	import {
		createOrder
	} from '@/api/index.js'
	import {
		nextTick
	} from "vue";
	export default {
		data() {
			return {
				detailJson: '',
				isCollect: false,
				nourl: 'https://chongwu.aitaoba.net/storage/uploads/20231118/9b682b05acda5417870b225f71a2c115.png',
				yesurl: 'https://chongwu.aitaoba.net/storage/uploads/20231118/1a821688be85c9ceca9950903d4b91fc.png',
				play: true,
				customBarH: '',
				swiperHeight: '',
				imgList: [] /*图片的高度列表*/ ,
				current: 0,
				coverHight: ''
			}
		},
		/**
		 * 跳转到个人中心
		 */

		onLoad(options) {
			this.getDetails(options.id);
		},


		mounted() {
			this.showImg()
		},

		methods: {
			// 图片预览
			handlePreviewImage(url, index) {
				let imgArr = [];
				imgArr.push(url);
				//预览图片
				uni.previewImage({
					urls: this.detailJson.images,
					current: index
				})
			},

			// 获取内容高度
			showImg() {
				this.$nextTick(() => {
					// this.imgList[0] = this.itemData.height
					// this.swiperHeight = this.imgList[0]
				})
			},
			handleImg(e) {
				let winWid = uni.getSystemInfoSync().windowWidth;
				let imgh = e.detail.height;
				let imgw = e.detail.width;
				let index = e.currentTarget.dataset.index
				let swiperH = winWid * imgh / imgw + 'rpx'
				this.imgList[index] = swiperH
				console.log(e, 'eeee')

				// this.swiperHeight=swiperH
			},

			handleLoad(e) {
				let winWid = uni.getSystemInfoSync().windowWidth;
				let imgh = e.detail.height;
				let imgw = e.detail.width;
				let index = e.currentTarget.dataset.index
				let swiperH = winWid * imgh / imgw + 'rpx'
				this.coverHight = swiperH
				console.log(this.coverHight, 'cover')
			},

			changeImg(e) {
				this.current = e.detail.current
				this.swiperHeight = this.imgList[this.current]
				console.log(this.imgList[this.current], 'this.imgList[this.current]')
				console.log(this.detailJson.images, 'images')
			},





			handleFullscreenchange(e) {
				this.play = !e.detail.fullScreen
				console.log(e, 'oeoeooeoeo')
			},

			handleTimeupdate(e) {
				console.log(e, 'eeeee')
				this.play = e.detail.currentTime == e.detail.duration ? true : false
			},

			getDetails(id) {
				let data = {
					id: id
				};
				goodsDetail(data).then((res) => {
					console.log(res, '商品详情');
					if (res.code == 200) {
						this.detailJson = res.data;
						this.getCurrentSwiperHeight()
						if (res.data.is_collect == '1') {
							this.isCollect = true;
						} else if (res.data.is_collect == '0') {
							this.isCollect = false;
						}
					}
				}).catch((res) => {})
			},
			collect() {

				// 未收藏点击就是收藏
				if (this.isCollect == false) {
					let data = {
						id: this.detailJson.id
					};
					goodsCollect(data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '收藏成功',

							})
							this.isCollect = true;
						}
					}).catch()
				}
			},
			addToShoppingCart() {
				let data = {
					id: this.detailJson.id
				};
				addCart(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '加入购物车成功',

						})

					}
				}).catch()
			},



			orderCreate() {
				const _this = this;

				createOrder({
					id: _this.detailJson.id
				}).then((res) => {
					if (res.code == 200) {
						uni.navigateTo({
							url: "/pages/confirmAnOrder/confirmAnOrder?pageJson=" + encodeURIComponent(JSON
								.stringify(res
									.data))
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.cover {
		position: relative;

		.icons {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	#myVideo {
		width: 100%;
		position: absolute;
		height: 100%;
	}

	.productDetails {
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.topBack {
		width: 100%;
		height: 257rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.swiperClass {
		width: 100%;
		// height: 450rpx;
		// height: 100%;
		background: transparent;
		// border-radius: 40rpx 40rpx 0rpx 0rpx;

	}

	.titleDiv {
		width: 100%;
		height: 166rpx;
		padding: 32rpx 0 0 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		box-sizing: border-box;
	}

	.kongbai {
		width: 100%;
		height: 148rpx;

	}

	.bottomDiv {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;

		&.bottomDiv_right {
			justify-content: flex-end;
		}

		.hjText {
			min-width: 72rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #2E2908;
		}

		.hjMone {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #EB1515;
		}

		.collectDiv {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 45rpx;

			.czImgClass {
				width: 38rpx;
				height: 38rpx;

			}

			.collectDivBottom {
				min-width: 52rpx !important;
				text-align: center !important;
				margin-top: 6rpx !important;
				font-size: 24rpx !important;

				color: #2E2908 !important;
			}

			.minWidth80 {
				min-width: 80rpx !important;
			}

		}

		.shareButton {
			max-width: 50rpx !important;
			max-height: 72rpx !important;
			background: none !important;
			outline: none !important;
			border: none !important;

			border-radius: none !important;
			margin-left: 48rpx !important;
			margin-right: 0rpx !important;
			padding-left: 0rpx !important;
			padding-right: 0 !important;
			line-height: none !important;

			.buttonImg {

				min-height: 38rpx !important;
			}

			.buttonText {
				margin-top: 0 !important;
				transform: translate(0, -20%);
			}

			&::after {
				border: 0;
			}
		}

		.marginLeft53 {
			margin-left: 43rpx;
		}

		.marginLeft50 {
			margin-left: 40rpx;
		}

		.purchaseButton {
			width: 180rpx;
			height: 72rpx;
			background: #FED24C;
			border-radius: 49rpx;
			box-sizing: border-box;
			border: 2rpx solid #683518;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			color: #683518;
			text-align: center;
			line-height: 70rpx;
			margin-left: 22rpx;
			padding: 0;

		}
	}
</style>